<template>
  <div id="app">
    <!--<app-nav-drawer :open.sync="open" :docked="docked" :home="home" />-->
    <app-nav-drawer :open.sync="open" :docked="docked" :home="home" :menuList="menuList"/>
    <mu-appbar :color="home ? 'transparent' : 'primary'" class="mu-appbar-header" style="z-index: 101;" :class="{'is-open': (!home && open && docked), 'is-only-title': !(home || !docked)}" :zDepth="home ? 0 : 4">
      <mu-button  icon slot="left" @click="toggleMenu">
        <mu-icon size="24" value="menu"/>
      </mu-button>
      {{pageName}}
      <mu-menu slot="right"  placement="bottom-end">
      <mu-button flat>{{username}}</mu-button>
      <mu-list slot="content">
        <mu-list-item button @click="logout">
            <mu-list-item-title  >注销</mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </mu-menu>

      <mu-menu slot="right" :open.sync="openTheme">
        <mu-button flat>
          <mu-icon value="color_lens"></mu-icon>
        </mu-button>
        <mu-list slot="content" :value="theme" @change="changeTheme">
          <mu-list-item button v-for="item in themes" :value="item.value" :key="item.value">
            <mu-list-item-action>
              <mu-icon :color="item.color" value="brightness_1"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>{{item.label}}</mu-list-item-title>
          </mu-list-item>
        </mu-list>
      </mu-menu>
    </mu-appbar>
    <div class="app-content" :class="{'is-open': (!home && open && docked)}">
      <router-view />
    </div>
  </div>
</template>

<script>
  import AppNavDrawer from '@/components/side-nav';
import {auth_menu} from '@/api/api'
  import MuseUI from 'muse-ui';
  export default {
    name: 'App',
    data () {
      return {
        menuList: [],
        out:'注销',
        username: '',
        docked: isDesktop(),
        isMobile: isMobile(),
        activeMenu: false,
        themes: [{
          label: 'Light',
          value: 'light',
          color: 'blue'
        }, {
          label: 'Dark',
          value: 'dark',
          color: 'blue700'
        }, {
          label: 'Carbon',
          value: 'carbon',
          color: '#474a4f'
        }],
        theme: 'light',
        openTheme: false,
        open: false
      }
    },
    computed: {
      home () {
        return (this.$route && this.$route.name === 'home');
      },
      pageName () {
        return this.$route && this.$route.meta && this.$route.meta.name;
      }
    },
    mounted () {
      this.changeNav();
      this.handleResize = () => {
        this.changeNav();
        this.isMobile = isMobile();
      };
      window.addEventListener('resize', this.handleResize);
    },
    created () {
      this.getUser()
      this.getMenuList()
    },
    methods: {
      getMenuList() {
        auth_menu().then(response => {
          // console.log(JSON.stringify(response.menuList))
          this.menuList = response.menuList;
        }, (message) => {
          window.alert(message)
        })
      },
      getUser () {
        this.username = localStorage.getItem('username')
      },
      logout () {
        localStorage.clear()
        this.$router.push('/login')
      },
      changeTheme (theme) {
        this.theme = theme;
        this.openTheme = false;
        MuseUI.theme.use(theme);
      },
      changeNav () {
        const desktop = isDesktop();
        this.docked = this.home ? false : desktop;
        if (desktop === this.desktop) return;
        if (!desktop && this.desktop && this.open) {
          this.open = false;
        }
        if (desktop && !this.desktop && !this.open && !this.home) {
          this.open = true;
        }
        this.desktop = desktop;
      },
      toggleMenu () {
        this.open = !this.open;
      }
    },
    watch: {
      home (val) {
        this.open = !val;
        this.changeNav();
      },
      pageName () {
        this.activeMenu = false
      }
    },
    components: {
      'app-nav-drawer': AppNavDrawer
    }
  }

  function isDesktop () {
    return window.innerWidth > 993;
  }

  function isMobile () {
    return window.innerWidth < 660;
  }
</script>
<style lang="less">
  .mu-app-drawer-header {
    .mu-appbar-title {
      line-height: 24px;
      display: flex;
      align-items: flex-start;
      font-size: 24px;
      flex-direction: column;
      font-weight: 500;
    }
    .mu-appbar-title-text {
      cursor: pointer;
      &:hover {
        text-decoration: underline
      }
    }
    .mu-app-version {
      line-height: 1;
      font-size: 12px;
      margin-top: 4px;
      cursor: pointer;
      &:hover {
        text-decoration: underline
      }
    }
  }
  .mu-appbar-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 101;
    overflow: hidden;
    &.is-open {
      left: 256px;
    }
    &.is-only-title {
      .mu-appbar-title {
        margin-left: 16px;
      }
    }
  }
  .app-content {
    transition: all .45s cubic-bezier(.23,1,.32,1);
    padding-top: 56px;
  }
  .app-content.is-open {
    padding-left: 256px;
  }
  .toggle-icon {
    transition: transform .3s cubic-bezier(.23,1,.32,1);
    .mu-item.is-open & {
      transform: rotate(180deg);
    }
  }
  .markdown-body {
    padding-top: 16px;
    margin: 0 auto;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 100px;
  }

  .mu-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  @media (min-width: 600px) {
    .app-content {
      padding-top: 64px;
    }
  }

  @media (min-width: 600px) {
    .markdown-body {
      padding-left: 24px;
      padding-right: 24px;
    }
  }
  @media (min-width: 960px) {
    .markdown-body {
      max-width: 960px;
    }
  }
</style>
